<template>
    <div class="home">
        <van-swipe :autoplay="3000" lazy-render class="swiper">
            <van-swipe-item v-for="image in images" :key="image">
                <van-image width="100%" height="15rem" fit="cover" :src="image" />
            </van-swipe-item>
        </van-swipe>
        <div v-if="isLoading" style="height: 15rem;"></div>
        <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o" class="tips">
            请输入商家对应编号进入点餐
        </van-notice-bar>
        <van-password-input :value="value" :mask="false" :focused="showKeyboard" @focus="showKeyboard = true" />
        <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
        <van-overlay :show="show" @click="show = false">
            <div class="wrapper" @click.stop>
                <div v-if="!shopExists" style="color:#fff;">店铺不存在</div>
                <van-loading v-else type="spinner" color="#1989fa" class="block" />
            </div>
        </van-overlay>
        <lazy-component class="list">
            <van-card @click="goto(item.ssixcode)" v-for="item in allShop" currency="" :num="item.ssixcode" :tag="item.scomment"
                :price="item.sstatus == 1 ? '营业中' : '休息'" :desc="item.sintroduction" :title="item.sname"
                :thumb="item.spicture"></van-card>
        </lazy-component>
        <TabBar />
    </div>
</template>
  
<script setup>
import { ref, watch } from 'vue'
definePageMeta({

})


const images = [
    "https://img.cwiyc.top/WV7QKHpqUoaTMGv.jpg",
    "https://img.cwiyc.top/mQAvUwLo653N7Vc.jpg",
    "https://img.cwiyc.top/jP4ufVLElk91RHo.jpg",
    "https://img.cwiyc.top/Hv5yMTXBY8FC3hp.jpg",
];
const show = ref(false);
const value = ref('');
const showKeyboard = ref(false);
const router = useRouter();
const shopExists = ref(true)
const cookie = useCookie('shopcode')
const isFreshShop = ref(false)
const shopCodeCookie = useCookie('shopcode')
const isLoading = ref(true)
const allShop = ref([])
// bus.emit('routerInfo', { active: router.currentRoute._value.name })
function goto(sixcode) {
    shopCodeCookie.value=sixcode
    router.push("/records?code=" + sixcode);
}
setTimeout(() => { isLoading.value = false })

const { data, pending, error, refresh } = await myUseFetch('/getallshop', { method: 'get' })
allShop.value = [...data.value.data]
// console.log(allShop.value)
watch(value, (newValue, oldValue) => {
    if (newValue.length == 6) {
        show.value = true
        cookie.value = newValue
        setTimeout(() => {
            findShop(newValue)
        }, 1000)
    }
})
async function findShop(sixcode) {
    let shop = {
        ssixcode: sixcode
    }
    const { data, pending, error, refresh } = await myUseFetch('/getshop', { method: 'post', body: shop })
    if (data.value.code == -1) {
        shopExists.value = false
        setInterval(() => {
            show.value = false
            shopExists.value = true
        }, 1000);
    } else if (data.value.code == 0) {
        goto(sixcode)
    }
}
</script>
  
<style scoped lang="scss">
.home {
    height: 100%;
    width: 100%;
    background-color: rgb(240, 236, 236);

    .tips {
        margin-bottom: 0.6rem;
    }

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .list{
        margin-top: 1vh;
        padding-bottom: 10vh;
    }

}
</style>